<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: #192128;
        }

        .box {
            width: 100%;
        }

        .shang {
            background-image: url(./高清海报.gif);
            width: 80%;
            height: 500px;
            margin: 20px auto;
            background-size: 100% 500px;
        }

        .sr {
            width: 400px;
            height: 30px;
            background-color: #192128;
            border: 2px solid #726143;
            position: absolute;
            margin-left: 40%;
        }

        li {
            list-style: none;
            width: 200px;
            height: 230px;
            margin-right: 22px;
            float: left;
            margin-top: 30px;
        }

        li:hover {
            border: 1px solid #726143;
            transition: all 0.5s;
            transform: translateY(5px);
        }

        img {
            width: 199px;
            height: 200px;
        }

        .xia {
            width: 80%;
            height: 500px;
            margin: auto;
            margin-top: 20px;
        }

        font {
            margin-left: 70px;
            color: #cbc5b4;
        }

        .mtk {
            width: 500px;
            height: 600px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: white;
            z-index: 11;
            display: none;
            font-size: 13px;
        }

        .jdt {
            width: 200px;
            height: 200px;
            background-color: white;
            float: right;
        }

        .mtk img {
            width: 200px;
            height: 200px;
            margin-left: 10px;

        }

        h3 {
            margin-top: 10px;
            background-color: white;
        }

        span {
            margin-right: 10px;
            background-color: white;
        }

        .zzc {
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            right: 0;
            left: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            display: none;
            z-index: 10;
        }

        .ss {
            margin-top: 10px;
            width: 50px;
            height: 30px;
            color: white;
            margin-top: -20px;
            margin-left: 1100px;
            position: absolute;
        }

        .zhong {
            height: 50px;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="shang">
        </div>
        <div class="zhong"><input type="text" class="sr" placeholder="输入英雄名称"><br>
            <button class="ss" onclick="bd()">搜索</button>
        </div>
        <div class="xia">
            <ol>
                <!-- <li>
                    <img src="./索拉卡.jpg" alt=""><br>
                    <font>索拉卡</font>
                </li> -->
            </ol>
        </div>
        <div class="mtk">
            <p>
            <h3></h3><span style="font-size: 50px; float: right; margin-top: -30px;" class="on" onclick="no()">×</span>
            </p><br>
            <img src="" alt="" class="tp">
            <div class="jdt">
                <p style=" height: 20px; background-color: orange;" class="gj">攻击</p>
                <p style=" height: 20px; background-color: yellow; margin-top: 30px;" class="fy">防御</p>
                <p style=" height: 20px; background-color: blue; margin-top: 30px;" class="mf">魔法</p>
                <p style=" height: 20px; background-color: greenyellow; margin-top: 30px;" class="nd">难度</p>
            </div>
            <p style="background-color: white;" class="tag">
                对于那些敬畏旧神的人，沃利贝尔是风暴的实体化身。
                他充满怪力、野性和倔强的坚毅，早在凡人行走于弗雷尔卓德的冻土苔原之前，他就已经存在。
                这片土地由他和他的半神同胞们共同创造，是他要拼死保护的东西。
                人类的文明以及随之而来的软弱让他积怨已久，如今他为了旧习古道而战——要让这片土地回归野性，让鲜血畅流无阻。
                他渴望迎战任何反对者，亮出他的尖牙、利爪和雷霆般的压制力。
            </p>
        </div>
        <div class="zzc"></div>
    </div>
</body>

</html>
<script src="./lib/axios.min.js"></script>
<script>
    var ol = document.querySelector('ol')
    var box = document.querySelector('.box')
    var mtk = document.querySelector('.mtk')
    var zzc = document.querySelector('.zzc')
    function render(zt) {
        var status = zt ? zt : ''
        if (zt) {
            console.log(status);

            axios.get(`https://hmajax.itheima.net/api/lol/search`).then(res => {
                var dataStr = res.data.data;
                console.log(dataStr);
                var strArr = status.map((ele, index) => {
                    return `
                <li data-id="${ele.heroId}">
                    <img src="${ele.icon}" alt=""><br>
                    <font>${ele.name}</font>
                </li>`
                }).join('')
                ol.innerHTML = strArr
            })
        } else {
            axios.get(`https://hmajax.itheima.net/api/lol/search`).then(res => {
                var dataStr = res.data.data;
                console.log(dataStr);
                var strArr = dataStr.map((ele, index) => {
                    return `
                <li data-id="${ele.heroId}">
                    <img src="${ele.icon}" alt=""><br>
                    <font>${ele.name}</font>
                </li>`
                }).join('')
                ol.innerHTML = strArr
            })
        }
    }
    render()
    box.addEventListener('click', function (e) {
        if (e.target.tagName == 'IMG') {
            console.log(e.target.parentNode.dataset.id);
            var theId = e.target.parentNode.dataset.id;
            axios.get(`https://hmajax.itheima.net/api/lol/info?id=${theId}`).then(res => {
                var str = res.data.data.hero;
                console.log(str);
                var h3 = document.querySelector('h3')
                var tp = document.querySelector('.tp')
                var gj = document.querySelector('.gj')
                var fy = document.querySelector('.fy')
                var mf = document.querySelector('.mf')
                var nd = document.querySelector('.nd')
                mtk.style.display = 'block';
                zzc.style.display = 'block';
                h3.innerHTML = str.name + '' + str.title
                tp.src = str.icon
                gj.style.width = str.attack + '0%'
                fy.style.width = str.defense + '0%' 
                mf.style.width = str.magic + '0%'
                nd.style.width = str.difficulty + '0%'
            })
        }
    })
    function no() {
        mtk.style.display = 'none';
        zzc.style.display = 'none';
    }
    function bd() {
        var sr = document.querySelector('.sr')
        axios.get(`https://hmajax.itheima.net/api/lol/search?q=${sr.value}`).then(res => {
            console.log(res.data.data);
            render(res.data.data)
        })
    }
</script>